<template>
    <div class="dzBox">
        <div class="topBox">
            <div class="top">
                <img src="https://kaola-haitao.oss.kaolacdn.com/b5ad9954-7cf5-418e-9291-fd615a8099e3.png?x-oss-process=image/resize,w_156,h_38/quality,q_75"
                    alt="">
                <div class="topSmall">
                    <img src="https://kaola-haitao.oss.kaolacdn.com/2e96a755-362b-4239-9743-01f698351c41.png?x-oss-process=image/resize,w_26,h_26/quality,q_75"
                        alt="">
                    <span>入驻严审</span>
                </div>
                <div class="topSmall">
                    <img src="https://kaola-haitao.oss.kaolacdn.com/2e96a755-362b-4239-9743-01f698351c41.png?x-oss-process=image/resize,w_26,h_26/quality,q_75"
                        alt="">
                    <span>权威质检 ></span>
                </div>
            </div>
            <div class="top1">
                <div class="tableLine">
                    <div class="imgs  midText">
                        <img src="https://kaola-haitao.oss.kaolacdn.com/d3c18d60f0e54c32af5cf24d18be585b1419662519909i46mer1g10007.png?x-oss-process=image/resize,w_46,h_46/quality,q_75"
                            alt="">
                    </div>
                    <div class="imgs  midText1">
                        <img src="https://kaola-haitao.oss.kaolacdn.com/5b5dc18a-0df5-42d1-8e8b-4923c809f1bf_69_69.png?x-oss-process=image/resize,w_46,h_46/quality,q_75"
                            alt="">
                    </div>
                    <div class="imgs  midText2">
                        <img src="https://kaola-haitao.oss.kaolacdn.com/3b4c445f-7e25-49f3-ae0c-b34d25621a77_69_69.png?x-oss-process=image/resize,w_46,h_46/quality,q_75"
                            alt="">
                    </div>
                </div>
            </div>
            <div class="top2">
                <span>法国品牌</span>
                <span>国家保税仓发货</span>
                <span>沧州市</span>
            </div>
        </div>
        <div class="centerBox">
            <div class="xz">
                <span class="xz1">选择</span>
                <span class="xz2">颜色</span>
                <span>></span>
            </div>
            <div class="xz ps">
                <span class="xz11">配送</span>
                <span class="xz2s ps2">
                    <p>广州至沧州市新华区</p>
                    <p>付款后，预计12月20日送达</p>
                </span>
                <span>></span>
            </div>
            <div class="xz">
                <span class="xz11">运费</span>
                <span class="xz2s">7.00元起，店铺实付满88元免运费</span>
                <span>></span>
            </div>
            <div class="xz">
                <span><img src="http://kaola-haitao.oss.kaolacdn.com/fa2ce410d12243f58f1fc0467ff42490.jpeg"
                        alt=""></span>
                <span class="xz2s">7天无理由退货·运费险·极速退款</span>
                <span class="xz33">></span>
            </div>
        </div>
        <div class="bootomBox">
            <div class="tableLine1">

            </div>
            <div>
                <div class="xz ">
                    <span class="xz11 sm">说明</span>
                    <span class="xz2s th">
                        <span>不支持七天无理由退换货</span>
                    </span>
                    <span>></span>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
</script>
<style scoped>
.dzBox {
    font-size: 0.12rem;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto;
    margin-top: -1rem;
    background-color: #fff;
    border-radius: 0.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.topBox {
    width: 3.3rem;
    height: 0.8rem;
    display: flex;
    /* 从上到下 */
    flex-direction: column;
    justify-content: space-around;
    background-color: rgba(255, 50, 90, .08);
    border-radius: 0.1rem;
}

.top img {
    width: 0.66rem;
    height: 0.16rem;
}

.top .topSmall img {
    width: 0.12rem;
    height: 0.12rem;
    margin-right: 0.04rem;
}

.top {
    display: flex;
    align-items: center;

}

.top .topSmall {
    margin-left: 0.1rem;
}

.top1 img {
    width: 0.22rem;
    height: 0.22rem;
}

.top1 {
    display: flex;
    justify-content: space-between;
    margin-top: 0.1rem;
}

.el-divider {

    background-color: rgb(161, 147, 147);
}

/* .bj{
    background-color: #f75e59;
} */
.tableLine {
    position: relative;
    margin: 0 auto;
    width: 2.7rem;
    height: 0.01rem;
    background-color: #dca4a4;
    text-align: center;
    font-size: 16px;
    color: rgb(127, 119, 119);
}

.midText {
    position: absolute;
    left: 0%;
    padding: 0 15px;
    transform: translateX(-50%) translateY(-50%);
}

.midText1 {
    position: absolute;
    left: 50%;
    padding: 0 15px;
    transform: translateX(-50%) translateY(-50%);
}

.midText2 {
    position: absolute;
    left: 100%;
    padding: 0 15px;
    transform: translateX(-50%) translateY(-50%);
}

.top2 {
    margin-top: 0.1rem;
    padding-right: 0.12rem;
    padding-left: 0.08rem;
    display: flex;
    justify-content: space-between;
}

.xz {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 3.2rem;
    height: 0.4rem;
    font-size: 0.14rem;
}

.xz1 {
    color: #999;
    margin-right: 0.1rem;
}

.xz11 {
    font-size: 0.16rem;
    color: #999;
    margin-right: 0.06rem;
}

.xz2 {
    color: #333;
    font-weight: bold;
    width: 2.6rem;
}

.ps {
    height: 0.6rem;
}

.ps2 {
    display: flex;
    flex-direction: column;
}

.xz img {
    width: 0.45rem;
    height: 0.15rem;
}

.xz2s {
    font-size: 0.14rem;
    color: #333;
    width: 2.6rem;
}

.xz33 {
    margin-right: 0.15rem;
}

.tableLine1 {
    position: relative;
    margin: 0 auto;
    ;
    margin-top: -0.02rem;
    width: 3.2rem;
    height: 0.01rem;
    background-color: #9c8d8d;
    text-align: center;
}

.th {
    font-size: 0.16rem;
    color: #999;
}
</style>